﻿<script type="text/javascript">
    $('.chzn-drop').css('left', '0px');
    $('.chzn-drop').css('display', 'none');
    $('.chzn-single').on("click", function (e) {
        $(this).toggleClass('chzn-single-with-drop');
        $(this).next().toggleClass('visible');
        e.preventDefault();
    });
</script>

<style>
    .visible {
        display: block !important;
    }

    .chzn-results li:hover {
        background-color: #df4a43;
        color: white;
    }

    .form-group {
        width: 89%;
        text-align: left;
        margin: 0 auto;
    }

    .btn-fullcolor {
        width: 150px;
    }

    div#search_status_chzn {
            background-color: white;
    }

    .pattern-bg{
        background-image: url("../images/banners/Contact/buy-rent.jpg");
        background-size: cover;
    }
    .pattern-bg.colored-bg:before{
        background-color: rgba(0,0,0,0.6);
    }

</style>



		<!-- BEGIN PAGE TITLE/BREADCRUMB -->
 <div class="parallax colored-bg pattern-bg" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-title">Buy Rent</h1>

                <!-- <ul class="breadcrumb">
                    <li><a href="index.html">Home </a></li>
                    <li><a href="#">Pages</a></li>
                    <li><a href="register.html">Register</a></li>
                </ul> -->
            </div>
        </div>
    </div>
</div> 
<!-- END PAGE TITLE/BREADCRUMB -->
<!-- BEGIN CONTENT WRAPPER -->
<div class="content" ng-controller="BuyRentController">
    <div class="container">
        <div class="row">

            <!-- BEGIN MAIN CONTENT -->
            <div  class="main col-sm-12">

                <div style="float:none; margin: 0 auto" class="login col-sm-5 col-sm-offset-1">
                    
                    <h1 class="center">Fill Up Your Details and Requirements</h1>

                    <div class="alert alert-warning" ng-show="warning">
                        <button type="button" class="close" ng-click="close()" aria-hidden="true">&times;</button>
                        <ul ng-repeat="msg in warning">
                            <li class="glyphicon glyphicon-warning-sign">{{msg.msg}}</li>
                        </ul>
                    </div>
                    <div class="alert alert-danger" ng-show="error">
                        <button type="button" class="close" ng-click="close()" aria-hidden="true">&times;</button>
                        <span class="glyphicon glyphicon-ban-circle"></span>
                        <span>{{error}}</span>
                    </div>

                    <div class="alert alert-info" ng-show="info">
                        <button type="button" class="close" ng-click="close()" aria-hidden="true">&times;</button>
                        <span class="glyphicon glyphicon-info-sign"></span>
                        <span>{{info}}</span>
                    </div>



                    <div style="float:none;" class="col-sm-12">
                        <form class="form-style">
                            <!--<select ng-model="property.submissionType" ng-options="p for p in property.submissionType" class="form-control"></select>-->
                           
                           
                            <div id="search_status_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 77.4031px;" title="">
                                <a ng-click="submissionTypeChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ submissionType }}</span><div><b></b></div>
                                </a>
                                <div ng-show="submissionTypeChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateSubmissionType('Buy',false)">Buy</li>
                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateSubmissionType('Rent',false)">Rent</li>
                                        <li id="search_bedrooms_chzn_o_3" class="active-result" ng-click="updateSubmissionType('Both',false)">Both</li>
                                        <!--<li id="search_status_chzn_o_2" class="active-result" style="">For Rent</li>-->
                                    </ul>
                                </div>
                            </div>


                            <input ng-model="property.locationKeyword" type="text" name="location" placeholder="Your Preferred Area*" class="form-control" />

                            <!--<select ng-model="property.propertyType" ng-options="pt for pt in property.propertyType" class="form-control"></select>-->
                            <div id="search_status_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 77.4031px;" title="">
                                <a ng-click="propertyTypeChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ propertyType }}</span><div><b></b></div>
                                </a>
                                <div ng-show="propertyTypeChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updatePropertyType('Residential',false)">Residential</li>
                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updatePropertyType('Commercial',false)">Commercial</li>
                                        <li id="search_bedrooms_chzn_o_3" class="active-result" ng-click="updatePropertyType('Industrial',false)">Industrial</li>
                                        <li id="search_bedrooms_chzn_o_3" class="active-result" ng-click="updatePropertyType('Land',false)">Land</li>

                                        <!--<li id="search_status_chzn_o_2" class="active-result" style="">For Rent</li>-->
                                    </ul>
                                </div>
                            </div>




                            <input ng-model="property.price" type="number" name="budget" placeholder="Your budget*" class="form-control" />
                            <input ng-model="property.name" type="text" name="name" placeholder="Your name*" class="form-control" />
                            <input ng-model="property.phone" type="number" name="phone" placeholder="Your mobile phone*" class="form-control" />
                            <input ng-model="property.email" type="email" name="email" placeholder="Your email*" class="form-control" />
                            <input ng-model="property.company" type="company" name="company" placeholder="Your company*" class="form-control" />

                            <!--<select ng-model="property.useInvest" ng-options="c for c in property.useInvest" class="form-control"></select>-->
                            <div id="search_status_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 77.4031px;" title="">
                                <a ng-click="purposeChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ purposeName }}</span><div><b></b></div>
                                </a>
                                <div ng-show="purposeChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updatePurpose('Y',false)">Invest</li>
                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="UpdatePurpose('N',false)">Own Use</li>

                                    </ul>
                                </div>
                            </div>

                            <textarea ng-model="property.remark" type="text" name="remark" placeholder="Your remark*" class="form-control" />


                           

                            <button type="submit" class="btn btn-fullcolor" ng-click="save()">Submit</button>
                        </form>
                    </div>


                </div>

                <!-- <div class="login-info col-sm-4 col-sm-offset-1">
                    <h1>Why should you create an account?</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse facilisis purus sed justo egestas dapibus. Etiam vel sagittis nisi. Curabitur ac egestas lorem. Sed ut odio iaculis, interdum magna non, mattis dolor. Vestibulum id dignissim elit. Cras ut scelerisque dolor.</p>

                    <h1>Sell you property with us.</h1>
                    <p>Vestibulum rhoncus consequat aliquet. Mauris varius posuere mattis. Duis vitae molestie arcu. Curabitur sollicitudin, velit ut eleifend auctor, nibh orci pharetra risus, a malesuada nisi felis vel turpis. Aliquam fermentum nulla felis, sed molestie libero porttitor in. Vestibulum aliquet eu purus quis pellentesque. Nam eget lacus dolor.</p>
                </div> -->
            </div>
            <!-- END MAIN CONTENT -->

        </div>
    </div>
</div>
<!-- END CONTENT WRAPPER -->